<template>
	<view>
		<u-navbar :is-back="false" title=" " :border-bottom="false">
			<view class="slot-wrap">
				<u-tabs-swiper ref="tabs" :list="list" @change="change" :current="current" active-color="#2AC2B3"
					:is-scroll="false"></u-tabs-swiper>
			</view>
		</u-navbar>

		<swiper duration="300" class="swiper-box" :current="swiperCurrent" @change="changeIdx">
			<swiper-item>
				<scroll-view scroll-y class="scroll-view" @scrolltolower="lower">
					<!-- <u-sticky> -->
					<view class="" style="height: 96rpx"></view>
					<view class="topbtns topNav n-flex-row n-justify-between">
						<view class="n-flex-row">
							<view class="topbtn" :class="isSelect ? 'active' : ''" @click="all">
								{{$t('全部')}}
							</view>
							<view class="topbtn" :class="!isSelect ? 'active' : ''" @click="yiduihuan()">
								{{$t('已转换')}}
							</view>
						</view>
					</view>

					<view class="pl_header">
						<view class="pl_duihuan" @click="$.to('/pages/cangku/piliang_edit?type=1')"
							v-if="goodsList.length > 0">
							<view class="left">
								<u-icon name="plus-circle-fill" style="padding-right: 10rpx;" color="#70dde0"
									size="36rpx"></u-icon>
								<text>{{$t('批量转换')}}</text>
							</view>
							<view class="right">
								<u-icon name="arrow-right-double" style="padding-left: 10rpx;padding-top: 10rpx;"></u-icon>
							</view>
						</view>
						<!-- #ifndef MP-WEIXIN -->
						<view class="pl_duihuan" @click="$.to('/pages/cangku/piliang_edit?type=2')" style="width: 400rpx;">
							<view class="left">
								<u-icon name="plus-circle-fill" style="padding-right: 10rpx;" color="#70dde0"
									size="36rpx"></u-icon>
								<text>{{$t('批量转赠')}}</text>
							</view>
							<view class="right">
								<u-icon name="arrow-right-double" style="padding-left: 10rpx;padding-top: 10rpx;"></u-icon>
							</view>
						</view>
						<!-- #endif -->
					</view>
					<!-- </u-sticky> -->
					<!-- <u-empty text="仓库空空" :show="dataBuffer" mode="order"></u-empty> -->
					<view class="goodsList" v-if="smallTit == 0">
						<view class="list" v-for="(item, idx) in goodsList" :key="idx">
							<view class="goods">
								<image :src="item.goods_data.image" mode=""></image>
								<view class="info">
									<view class="tit">{{ item.goods_data.title }}</view>
                  <view class="bi" v-if="item.status == 0">
                    <text v-if="item.goods_data.is_exchange_coin == 0">{{$t('可转换')}}：<text>{{ Number(item.exchange_integral).toFixed(2) }}</text>{{$t('幸运币')}}</text>
                    <text v-else-if="item.goods_data.is_exchange_coin == 2">{{$t('可转换')}}：<text>{{$t('¥')}}:{{ Number(item.exchange_integral).toFixed(2) }}</text></text>
                  </view>
									<view class="time" v-else>{{$t('转换时间')}}：{{ item.exchange_time }}</view>
								</view>
							</view>
							<view class="tip" v-if="item.status == 0">
								<!-- <view class="tit">
									提示:请在<text>2022/11/02 00:00:00</text>前提取，过期不能提货，只能转换
								</view> -->
								<view class="btns n-flex-row">
									<!-- #ifndef MP-WEIXIN -->
									<view class="btn ti" @click="zhuan = true;zhuanId = item.id;">
									 {{$t('转赠')}}
									</view>
									<!-- #endif -->
									<!-- <view class="btn ti" @click="tihuo(item)"> 提货 </view> -->
									<view class="btn ti" v-if="item.goods_data.goods_type==1" @click="$.to('/pages/cangku/piliang_edit?type=3&id=' + item.id)">
										{{$t('提货')}}
									</view>
<!-- 									<view class="btn dui" @click="isagain(item.id)" v-if="cardList.length != 0">
										{{$t('重抽')}}
									</view> -->
									<view class="againbox"
										v-if="item.exchange_integral > 0 && item.goods_data.is_exchange_coin != 1">
				<!-- 						<view class="again" v-if="isOne == 0">
											{{$t('得重抽卡')}}*1
										</view> -->
										<view class="btn dui" @click="duihuan(item)">
											{{$t('转换')}}
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="" style="height: 100rpx"></view>
						<u-empty :text="$t('暂无数据')" mode="list" :show="nullShow" margin-top="400"></u-empty>
					</view>

					<view class="goodsList" v-if="smallTit == 1">
						<view class="list" v-for="(item, idx) in goodsList" :key="idx">
							<view class="goods" style="border: none">
								<image :src="item.goods_data.image" mode=""></image>
								<view class="info">
									<view class="tit">{{ item.goods_data.title }}</view>
									<view class="time">{{$t('转换时间')}}：{{ item.exchange_time }}</view>
								</view>
							</view>
						</view>
						<u-empty :text="$t('暂无数据')" mode="list" :show="nullShow" margin-top="400"></u-empty>
					</view>
				</scroll-view>
			</swiper-item>

			<swiper-item>
				<scroll-view scroll-y class="scroll-view">
					<view class="goodsList">
						<view class="list" v-for="(item, idx) in boxList" :key="idx">
							<view class="goods">
								<image :src="item.blind_box_data.image" mode=""></image>
								<view class="info">
									<view class="tit">{{ item.blind_box_data.title }}</view>
									<view class="row">{{$t('数量')}}：{{ item.num }}</view>
								</view>
							</view>
							<view class="tip">
								<view class="btns n-flex-row">
									<view class="btn dui" @click="kai(item.order_no, item.blind_box_id, item.num)">
										{{$t('开箱')}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<u-empty :text="$t('暂无数据')" mode="list" :show="mangheShow"></u-empty>
				</scroll-view>
			</swiper-item>

			<swiper-item>
				<scroll-view scroll-y class="scroll-view">
					<view>
						<view class="goodsList">
							<view class="list" v-for="(item, idx) in zhuanList" :key="idx">
								<view class="goods1">
									<image :src="item.goods_data.image" mode=""></image>
									<view class="info">
										<view class="tit">{{ item.goods_data.title }}</view>
										<view class="row">{{$t('时间')}}：{{ item.create_time }}</view>
										<view class="row" v-if="item.status_text == '赠送他人'">
											{{$t('受赠人')}}：{{ item.receive_nickname }}
										</view>
										<view class="row" v-else>{{$t('赠送人')}}：{{ item.give_nickname }}</view>
									</view>
									<view class="state">{{ item.status_text }}</view>
								</view>
							</view>
						</view>
					</view>
					<u-empty :text="$t('暂无数据')" mode="list" :show="zhuanShow"></u-empty>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="newagain" v-if="isOne == 0 && goodsList.length > 0">
			{{$t('新人首次转换，额外得重抽卡')}}*1
		</view>
		<u-modal v-model="show" @confirm="confirm" :content="$t('该商品已成功转换为盲盒,前往盒子查看')"></u-modal>
		<u-modal v-model="againshow" :show-cancel-button="true" @confirm="again"
			:content="$t('是否使用重抽卡重抽该商品')"></u-modal>
		<u-popup v-model="zhuan" mode="center" border-radius="20">
			<view class="zhuan">
				<view class="tit">{{$t('请输入转赠人的手机号')}}</view>
				<u-input v-model="phone" type="number" maxlength="11" :border="true" :placeholder="$t('请输入转赠人注册手机号')" />
				<view class="tip">{{$t('一旦转赠成功不可退货，请谨慎操作')}}</view>
				<view class="btns1">
					<view class="btn11 a" @click="zhuan = false">{{$t('取消')}}</view>
					<view class="btn11 b" @click="zhuanz">{{$t('确定')}}</view>
				</view>
			</view>
		</u-popup>
		<!-- <u-tabbar v-model="current" :list="mhstatus == 1 ? tabbar1 : tabbar " :mid-button="box_view"></u-tabbar> -->
		<u-tabbar v-model="current" :list="tabbar" :mid-button="box_view"></u-tabbar>
	</view>
</template>

<script>
	import {
		box_view
	} from "@/utils/keyControl.js";
	// import {
	// 	tabbar
	// } from "@/common/tabbar.js";
	export default {
		data() {
			return {
				tabbar: [{
						id: 0,
						iconPath: "https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/tab1.png",
						selectedIconPath: "https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/tab2.png",
						text: this.$t("首页"),
						customIcon: false,
						pagePath: "/pages/tabBar/home",
					},
					{
						id: 1,
						iconPath: "https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/tab3.png",
						selectedIconPath: "https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/tab4.png",
						text: this.$t("商城"),
						customIcon: false,
						pagePath: "/pages/tabBar/mall",
					},
					// {
					// 	id: 5,
					// 	iconPath: "https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/tab5.png",
					// 	selectedIconPath: "https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/tab6.png",
					// 	text: this.$t("盒子"),
					// 	midButton: true,
					// 	customIcon: false,
					// 	pagePath: "/pages/tabBar/old_home",
					// },
					{
						id: 2,
						iconPath: "https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/tab7.png",
						selectedIconPath: "https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/tab8.png",
						text: this.$t("仓库"),
						customIcon: false,
						pagePath: "/pages/tabBar/cangku",
					},
					{
						id: 3,
						iconPath: "https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/tab9.png",
						selectedIconPath: "https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/tab10.png",
						text: this.$t("我的"),
						customIcon: false,
						pagePath: "/pages/tabBar/my",
					},
				],
				tabbar1: [{
						id: 0,
						iconPath: "https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/tab1.png",
						selectedIconPath: "https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/tab2.png",
						text: this.$t("首页"),
						customIcon: false,
						pagePath: "/pages/tabBar/home",
					},
					{
						id: 2,
						iconPath: "https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/tab7.png",
						selectedIconPath: "https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/tab8.png",
						text: this.$t("仓库"),
						customIcon: false,
						pagePath: "/pages/tabBar/cangku",
					},
					{
						id: 3,
						iconPath: "https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/tab9.png",
						selectedIconPath: "https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/tab10.png",
						text: this.$t("我的"),
						customIcon: false,
						pagePath: "/pages/tabBar/my",
					},
				],
				current: 4,
				nullShow: false,
				mangheShow: false,
				zhuanShow: false,
				list: [{
						name: this.$t('商品'),
					},
					{
						name: this.$t('盒子'),
					},
					// #ifndef MP-WEIXIN
					{
						name:  this.$t('转赠'),
					},
					// #endif
				],
				// current: 0,
				swiperCurrent: 0,
				dataBuffer: true,
				isSelect: true,
				smallTit: 0,
				goodsList: [],
				isOne: "0",
				boxList: [],
				cardList: [],
				show: false,
				againshow: false,
				againId: "",
				zhuan: false,
				phone: "", //转赠人手机号
				zhuanId: "",
				zhuanList: [],
				page: 1,
				status: "more", //  加载状态  more:有更多数据  noMore: 加载全部数据  loading:数据加载中
				sta: 0, // 0 全部
				box_view: false,
				mhstatus: uni.getStorageSync("mhstatus"), //版本控制开关
			};
		},
		onLoad() {
			this.box_view = box_view;
			uni.$on("sc", (data) => {
				if (data == 0) {
					this.current = 0;
				}
				if (data == 1) {
					this.current = 1;
				}
			});
		},
		onUnload() {
			uni.$off("sc");
		},

		onShow() {
			this.goodsList = [];
			this.boxList = [];
			this.page = 1;
			if (uni.getStorageSync("user")) {
				this.page = 1;
				this.getBox();
				this.all();
				this.getCard();
			} else {
				uni.redirectTo({
					url:'../../pages/my/login'
				})
			}
		},
		//计算属性
		computed: {
			allSelect: {
				set: function(newVal) {
					this.goodsList.forEach((item) => {
						item.check = newVal;
					});
				},
				get: function() {
					return this.goodsList.every((item) => {
						return item.check == true;
					});
				},
			},
		},
		methods: {
			zhuanzheng() {
				this.zhuan = true;
				let arr = [];
				this.goodsList.forEach((item) => {
					if (item.check == true) {
						arr.push(item.id);
					}
				});
				if (arr.length == 1) {
					arr = arr[0];
				}
				console.log(arr);
				this.zhuanId = arr;
				if (arr.length == 0) {
					this.$tip.tip(this.$t("请选择商品"));
					return;
				}
			},
			// 确定转赠
			zhuanz() {
				if (!this.$u.test.mobile(this.phone)) {
					this.$tip.tip(this.$t("请输入正确的手机号"));
					return;
				}
				this.$http({
						url: "api/order/prize_give",
						data: {
							id: this.zhuanId,
							receive_username: this.phone,
						},
					})
					.then((res) => {
						console.log(res);
						if (res.data.code == 1) {
							this.zhuan = false;
							this.phone = "";
							this.current = 2;
							this.swiperCurrent = 2;
							this.$tip.tip(res.data.msg);
						} else {
							this.$tip.tip(res.data.msg);
						}
					})
					.catch((err) => {});
			},
			kai(id, boxfl_id, num) {
				uni.navigateTo({
					url: "/pages/home/luckbox",
				});
				setTimeout(() => {
					uni.$emit("paydata", {
						ooid: id,
						id: boxfl_id,
						num: num,
					});
				}, 600);
			},
			isagain(id) {
				this.againId = id;
				this.againshow = true;
			},
			// 重抽
			again(id) {
				if (this.cardList.length == 0) {
					this.$tip.tip(this.$t("没有可使用的重抽卡"));
					return;
				}
				this.$http({
						url: "api/order/redraw_prize",
						data: {
							card_id: this.cardList[0].id,
							id: this.againId,
						},
					})
					.then((res) => {
						if (res.data.code == 1) {
							this.show = true;
							this.getCard();
						} else {
							this.$tip.tip(res.data.msg);
						}
					})
					.catch((err) => {});
			},
			// 获取重抽卡
			getCard() {
				this.$http({
						url: "api/member/get_my_card",
					})
					.then((res) => {
						if (res.data.code == 1) {
							let data = res.data.data;
							let data_list = [];
							data.forEach((item, index) => {
								if (item.card_data.type == 1) {
									item = item;
									data_list.push(item);
								}
							});
							this.cardList = data_list;
						}
					})
					.catch((err) => {});
			},
			//未开盒的盲盒
			getBox() {
				this.$http({
						url: "api/order/get_blind_box_order",
						data: {
							page: this.page,
						},
					})
					.then((res) => {
						if (res.data.code == 1) {
							if (this.page == 1 && res.data.data.length == 0) {
								this.mangheShow = true;
							} else {
								this.mangheShow = false;
							}

							if (this.page == 1) this.boxList = [];
							let curPageData = res.data.data;
							// console.log(this.boxList, ' res.data.data.list'  ,curPageData)
							this.boxList = this.boxList.concat(curPageData);
							if (curPageData && curPageData.length > 0) {
								this.status = "more";
								this.page++;
							} else {
								this.status = "noMore";
							}

							// this.boxList = res.data.data
						} else {
							this.boxList = [];
							this.mangheShow = true;
						}
					})
					.catch((err) => {});
			},
			// 前往盒柜
			confirm() {
				this.getBox();
				this.current = 1;
				this.swiperCurrent = 1;
			},
			// 全部
			all() {
				this.page = 1;
				this.isSelect = true;
				this.smallTit = 0;
				this.goodsList = [];
				this.sta = 0;
				this.getData(0);
			},
			// 已转换
			yiduihuan() {
				this.isSelect = false;
				this.smallTit = 1;
				this.page = 1;
				this.goodsList = [];
				this.sta = 2;
				this.getData(2);
			},
			lower(e) {
				if (this.status != "noMore") {
					this.getData();
				}
			},
			getData(sta) {
				uni.showLoading({
					title: this.$t("加载中"),
				});
				// this.goodsList = []
				this.$http({
						url: "api/order/get_prize_record",
						data: {
							status: this.sta,
							page: this.page,
						},
					})
					.then((res) => {
						uni.hideLoading();
						if (res.data.code == 1) {
							if (this.page == 1 && res.data.data.list.length == 0) {
								this.nullShow = true;
							} else {
								this.nullShow = false;
							}
							res.data.data.list.forEach((item) => {
								item.check = false;
							});
							// let total = res.data.data.total; // 数据的长度
							if (this.page == 1) this.goodsList = [];
							let curPageData = res.data.data.list;
							console.log(this.goodsList, " res.data.data.list", curPageData);
							this.goodsList = this.goodsList.concat(curPageData);
							if (curPageData && curPageData.length == 10) {
								this.status = "more";
								this.page++;
							} else {
								this.status = "noMore";
							}
							// this.goodsList = res.data.data.list

							this.isOne = res.data.data.cck;
						} else {
							this.nullShow = true;
							this.$tip.tip(res.data.msg);
						}
					})
					.catch((err) => {});
			},
			change(index) {
				this.current = index;
				this.swiperCurrent = index;
				this.page = 1;
			},
			// 页面改变
			changeIdx(idx) {
				this.page = 1;
				this.current = idx.detail.current;
				this.swiperCurrent = idx.detail.current;
				if (this.current == 0) {
					this.all();
					this.goodsList = [];
				} else if (this.current == 1) {
					this.getBox();
					this.boxList = [];
				} else if (this.current == 2) {
					this.getZhuan();
				}
			},
			// 转赠记录
			getZhuan() {
				uni.showLoading({
					title: this.$t("加载中"),
				});
				this.$http({
						url: "api/order/prize_give_log",
						data: {
							page: this.page,
						},
					})
					.then((res) => {
						uni.hideLoading();
						if (res.data.code == 1) {
							if (this.page == 1 && res.data.data.length == 0) {
								this.zhuanShow = true;
							} else {
								this.zhuanShow = false;
							}
							if (this.page == 1) this.zhuanList = [];
							let curPageData = res.data.data;
							console.log(this.zhuanList, " res.data.data.list", curPageData);
							this.zhuanList = this.zhuanList.concat(curPageData);
							if (curPageData && curPageData.length > 0) {
								this.status = "more";
								this.page++;
							} else {
								this.status = "noMore";
							}
							// this.zhuanList = res.data.data
						} else {
							this.zhuanShow = true;
							this.$tip.tip(res.data.msg);
						}
					})
					.catch((err) => {});
			},
			tihuo(item) {
				let data = {
					image: item.goods_image,
					name: item.goods_name,
					yunfei: item.delivery_fee,
				};
				uni.setStorageSync("tihuo", data);
				uni.navigateTo({
					url: "/pages/cangku/confirmOrder?id=" + item.id,
				});
			},
			duihuan(item) {
				let data = [{
					image: item.goods_data.image,
					name: item.goods_data.title,
					price: item.exchange_integral,
					id: item.id,
				}, ];
				uni.setStorageSync("dui", data);
				uni.navigateTo({
					url: "/pages/cangku/duihuan?id=" + item.id,
				});
			},
		},
	};
</script>

<style>
	@import url("../../static/css/cangku.css");
</style>
